<template>
  <div class="GuestPiece">
    <planting :lbimgList="lbimgList"></planting>
    <div class="GuestPiece-imgtitle">
      <imgtitle>
        <img src="/img/activity_title.jpg" />
      </imgtitle>
    </div>
    <target></target>
    <footer class="Home-footer">
      <div class="Home-footer-body">
        <ul class="Home-footer-body-list-ul">
          <li class="Home-footer-body-list-li" v-for="(item) in GuestPieceListInfo" :key="item.id">
            <router-link :to="'guestpieceinfo/'+item.id" tag="span">
              <div class="Home-footer-body-list-li-img">
                <img v-lazy="item.icon" />
                <img class="Home-footer-body-list-li-img-bg" src="/img/imgfootbg.png" />
              </div>
              <div class="Home-footer-body-list-txt">
                <p style="font-size: 18px;font-weight: normal;">{{item.title}}</p>
                <p style="font-size:10px;">ONLY TRAVEL WEDDING PHOTOGRAPHY</p>
                <p style="font-size:10px;">TIME:{{item.time|timeDate}}</p>
              </div>
            </router-link>
          </li>
        </ul>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="ListCount"
          prev-text="上一页"
          next-text="下一页"
          :page-size="8"
          :current-page="pageIndex"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </footer>
  </div>
</template>
<script>
import target from "../../components/conn/target";
import imgtitle from "../../components/conn/imgtitle";
import planting from "../../components/conn/planting";
import { GuestPiece, getIndexlbimgList } from "../../ajax/index";
export default {
  data() {
    return {
      lbimgList: [
        
      ],
      pageIndex: 1,
      GuestPieceListInfo: [],
      ListCount: 2
    };
  },
  methods: {
    getGuestPiece() {
      GuestPiece({
        page: this.pageIndex
      })
        .then(result => {
          if (result.code) {
            this.GuestPieceListInfo = result.data;
            this.ListCount = result.pageNum;
          }
        })
        .catch(err => {});
    },
    handleCurrentChange(page) {
      this.pageIndex = page;
      this.getGuestPiece();
    },
     getIndexlbimgList() {
      getIndexlbimgList()
        .then(result => {
          if (result.code) {
            this.lbimgList = result.data;
          }
        })
        .catch(err => {});
    },
  },
  components: {
    target,
    planting,
    imgtitle
  },
  created() {
    this.getGuestPiece();
    this.getIndexlbimgList();
  }
};
</script>
<style lang="scss">
.GuestPiece {
  .GuestPiece-imgtitle {
    margin: 80px auto;
  }
  .Home-lbimg {
    .el-carousel__item .medium {
      height: 100%;
      margin: 0;
    }
    .Home-lbimg-carousel {
      .el-carousel__indicator.is-active button {
        background-color: #ab9171;
      }
      .el-carousel__button {
        height: 15px;
        width: 15px;
        border-radius: 50%;
      }
    }
  }
  .Home-footer {
    display: flex;
    margin-bottom: 60px;
    justify-content: center;
    .Home-footer-body {
      width: 1300px;
      .Home-footer-body-list-ul {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        .Home-footer-body-list-li {
          margin: 0px 6px;
          margin-top: 20px;
          &:hover
            .Home-footer-body-list-li-img
            .Home-footer-body-list-li-img-bg {
            transform: translateY(-480px);
          }
        }
        .Home-footer-body-list-li-img {
          height: 480px;
          width: 312px;
          position: relative;
          overflow: hidden;
          .Home-footer-body-list-li-img-bg {
            position: absolute;
            top: 480px;
            transition: all 0.5s;
            left: 0px;
          }
        }
        .Home-footer-body-list-txt {
          margin-top: 10px;
        }
      }
    }
  }
  .Home-botton {
    margin-top: 60px;
    width: 100%;
    .Home-botton-both {
      position: relative;
      .Home-botton-img {
        height: 451px;
      }
      .Home-botton-txt {
        position: absolute;
        bottom: 0px;
        z-index: 100;
        height: 54px;
        width: 100vw;
        background-color: #000;
        opacity: 0.5;
        .Home-botton-txt-ul {
          display: flex;
          justify-content: center;
          .Home-botton-txt-li {
            height: 100%;
            line-height: 54px;
            color: #ccc;
            margin-left: 54px;
          }
        }
      }
    }
  }
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev {
    border: 1px solid rgb(153, 153, 153);
    width: 100px;
    border-radius: 19px;
    line-height: 40px;
    margin: 0 8px;
    text-align: center;
    height: 40px;
    font-size: 18px;
    width: auto;
    padding: 0 20px;
    color: #212121;
    border: 1px solid #999;
    background-color: #fff;
    & span {
      display: inline-block;
      line-height: 40px;
    }
    &:hover {
      background: #c6a65b;
      color: #fff;
      border-color: #c6a65b;
    }
  }
  .el-pagination.is-background .el-pager li {
    &:hover {
      background: #c6a65b;
      color: #fff;
      border-color: #c6a65b;
    }
    border: 1px solid rgb(153, 153, 153);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 38px;
    background-color: #fff;
  }
  .el-pagination {
    margin-top: 40px;
    text-align: center;
    &.is-background .el-pager li:not(.disabled).active {
      background: #c6a65b;
      color: #fff;
      border-color: #c6a65b;
    }
  }
}
</style>